<template>
	<view style="padding: 1rpx;">
		<view class="top-change">
			<view class="con">
				<view @click="change('article')" class="item" :class="active=='article'?'act':''">
					精选文章
				</view>
				<view @click="change('brand')" class="item" :class="active=='brand'?'act':''">
					品牌列表
				</view>
			</view>
		</view>

		<view class="brandlist">
			<view v-if="show" class="brand" v-for="(item,index) in brandlist" :key='item.id'>
				<image :src="item.bigPic?item.bigPic:'../../static/images/error.jpg'" mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
				<view class="des">
					{{item.brandStory}}
				</view>
			</view>
		</view>

		<view class="articlelist">
			<view v-if="!show" class="article" v-for="(item,index) in articlelist" :key='item.id'>
				<image @click="toarticleinfo(item.id)" class="image" :src="item.coverImg" @error="imageerror(index)" mode=""></image>
				<view class="title">
					{{item.title}}
				</view>
				<view class="author">
					{{item.author}}
				</view>
				<view class="article-data">
					<view class="left">
						<uni-icons type="eye" style="color: #999;padding-right: 10rpx;" size="20"></uni-icons>
						<view class="num">
							{{item.viewCount}}
						</view>
					</view>
					<view class="right">
						<image @click="zan(item.id)" class="opa" src="../../static/images/icons/zan.png" mode=""></image>
						<image @click="collect(index)" :src="item.iscollect?'../../static/images/icons/collect-act.png':'../../static/images/icons/collect2.png'"
						 mode=""></image>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		findBrandsByPage,
		productArticle
	} from '../../api/find/find.js'
	export default {
		data() {
			return {
				active: 'article',
				brandlist: '',
				articlelist: "",
				show: false,
				num: 5,
				num1: 5,
				collectshow: true,
				textid: ""
			}
		},
		onReachBottom() {
			if (this.show) {
				console.log("页面触底");
				this.num1 += 5;
				this.init()
			} else {
				console.log("页面触底");
				this.num += 5;
				this.init()
			}
		},
		methods: {
			imageerror(index) {
				console.log(index);
				this.articlelist[index].coverImg = "../../static/images/error.jpg"
			},
			init() {
				//获取文章列表
				productArticle(1, this.num).then(res => {
						console.log(res.data.rows);-
						res.data.rows.forEach(el => {
							el.iscollect = false
						})
						this.articlelist = res.data.rows
					}),
					// 获取品牌列表
					findBrandsByPage(1, this.num1).then(res => {
						console.log(res.data.rows);
						this.brandlist = res.data.rows
					})
			},
			// 顶部切换
			change(type) {
				console.log(type);
				if (type == 'article') {
					this.show = false;
					this.active = 'article'

				} else {
					this.show = true;
					this.active = 'brand'
				}
			},
			// 到文章详细页面
			toarticleinfo(ids) {
				console.log(ids);
				uni.navigateTo({
					url: `./articleinfo/articleinfo?id=${ids}`
				})
			},
			// 点赞
			zan(id) {
				uni.showToast({
					title: '点赞 +1'
				})
			},
			// 收藏与否
			collect(index) {
				console.log(index);
				if (this.articlelist[index].iscollect) {
					console.log('1111');
					this.articlelist[index].iscollect = false
					uni.showToast({
						title: '取消成功',
					})
				} else {
					console.log('2222');
					this.articlelist[index].iscollect = true
					uni.showToast({
						title: '收藏成功',
					})
				}
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.top-change {
		width: 100%;
		height: 88rpx;
		background-color: #354E44;
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 0rpx;
		/* #ifdef H5 */
		top: 0;
		margin-bottom: 20rpx;
		top: 88rpx;
		/* #endif */
		z-index: 999;
		box-sizing: border-box;

		.con {
			width: 286rpx;
			height: 55rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;

			.act {
				border-bottom: 4rpx solid rgba($color: #fff, $alpha: .8);
				box-sizing: border-box;
			}

			.item {
				width: 128rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				line-height: 40rpx;
				box-sizing: border-box;
			}
		}
	}

	.brand {
		box-shadow: 0 8px 24px 0 rgba(122, 98, 75, 0.12);
		width: 690rpx;
		margin: 40rpx auto;
		background-color: #fff;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-sizing: border-box;

		image {
			width: 690rpx;
			box-sizing: border-box;
		}

		.title {
			padding: 5rpx 40rpx;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #3e3e3e;
			box-sizing: border-box;

		}

		.des {
			padding: 5rpx 40rpx;
			font-size: 22rpx;
			color: #b1b1b1;
			line-height: 30rpx;
			white-space: nowrap;
			overflow: hidden;
			box-sizing: border-box;
		}
	}

	.article {
		width: 670rpx;
		height: 480rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 40rpx auto;
		position: relative;
		color: #999;
		box-shadow: 0 16rpx 48rpx 0 rgba(122, 98, 75, 0.12);
		box-sizing: border-box;

		.image {
			width: 670rpx;
			height: 380rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			box-sizing: border-box;
		}

		.title {
			position: relative;
			z-index: 22;
			color: #fff;
			font-size: 48rpx;
			line-height: 68rpx;
			margin-top: 240rpx;
			margin-left: 20rpx;
			box-sizing: border-box;
		}

		.author {
			position: relative;
			z-index: 22;
			color: #fff;
			font-size: 30rpx;
			line-height: 42rpx;
			margin-left: 20rpx;
			box-sizing: border-box;
		}

		.article-data {
			margin-top: 56rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;

			image {
				width: 40rpx;
				height: 40rpx;
				box-sizing: border-box;
			}

			.left {
				width: 80rpx;
				margin-left: 60rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
			}

			.right {
				width: 120rpx;
				margin-right: 60rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
			}

			.opa {
				opacity: .6;
				box-sizing: border-box;
			}
		}
	}

	.articlelist {
		/* #ifdef H5 */
		padding: 0.1rpx;
		margin-top: -50rpx;
		/* #endif */
		padding: 0.1rpx;
		margin-top: 0rpx;

	}

	.brandlist {
		/* #ifdef H5 */
		padding: 0.1rpx;
		margin-top: -150rpx;
		/* #endif */
		padding: 0.1rpx;
		margin-top: 84rpx;
	}
</style>
